<template>
  <el-row :gutter="12">
    <el-col :span="6">
      <el-card shadow="always" class="mb10">
        <div class="info" @click="changeTab('WART_SEND',2)">
          <div class="label">超2小时未派单</div>
          <div class="value">
            <el-statistic
              group-separator=","
              :precision="0"
              :value="tabs.sendOrderTwo"
            ></el-statistic>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="info" @click="changeTab('WART_SEND',24)">
          <div class="label">超24小时未派单</div>
          <div class="value">
            <el-statistic
              group-separator=","
              :precision="0"
              :value="tabs.sendOrderTwentyFour"
            ></el-statistic>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="always" class="mb10">
        <div class="info" @click="changeTab('WART_APPOINTMENT',2)">
          <div class="label">超2小时未预约</div>
          <div class="value">
            <el-statistic
              group-separator=","
              :precision="0"
              :value="tabs.appointmentOrderTwo"
            ></el-statistic>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="info" @click="changeTab('WART_APPOINTMENT',24)">
          <div class="label">超24小时未预约</div>
          <div class="value">
            <el-statistic
              group-separator=","
              :precision="0"
              :value="tabs.appointmentOrderTwentyFour"
            ></el-statistic>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="always">
        <div class="info" @click="changeTab('WART_SITE',2)">
          <div class="label">超2小时未上门</div>
          <div class="value">
            <el-statistic
              group-separator=","
              :precision="0"
              :value="tabs.startOrderTwo"
            ></el-statistic>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="info" @click="changeTab('WART_SITE',24)">
          <div class="label">超24小时未上门</div>
          <div class="value">
            <el-statistic
              group-separator=","
              :precision="0"
              :value="tabs.startOrderTwentyFour"
            ></el-statistic>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="always">
        <div class="info" @click="changeTab('WORKING',2)">
          <div class="label">超2小时未完工</div>
          <div class="value">
            <el-statistic
              group-separator=","
              :precision="0"
              :value="tabs.finishOrderTwo"
            ></el-statistic>
          </div>
        </div>
        <el-divider direction="vertical" style="height: 100px"></el-divider>
        <div class="info" @click="changeTab('WORKING',24)">
          <div class="label">超24小时未完工</div>
          <div class="value">
            <el-statistic
              group-separator=","
              :precision="0"
              :value="tabs.finishOrderTwentyFour"
            ></el-statistic>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  components: {},
  props: {
    tabs: {
      type: Object,
      default: () => {
        return {
          sendOrderTwo: 0,
          sendOrderTwentyFour: 0,
          appointmentOrderTwo: 0,
          appointmentOrderTwentyFour: 0,
          startOrderTwentyFour: 0,
          finishOrderTwo: 0,
          finishOrderTwentyFour: 0,
        };
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    changeTab(status,hours) {
      const now = this.$moment().subtract(hours,'hours').format('yyyy/MM/DD HH:mm:ss');
      console.log(now);
      this.$emit('cardSearch',{status,endTime:now,startTime:this.$moment('2000/01/01 00:00:00').format('yyyy/MM/DD HH:mm:ss')})
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-card__body {
  display: flex !important;
  align-items: center;
  .el-divider {
    height: 40px;
    margin: 0 20px 0 0;
  }
  .info {
    flex: 1;
    cursor: pointer;
    .label {
      margin-bottom: 10px;
      font-size: 18px;
    }
    .value {
      font-weight: 600;
      display: flex;
      .el-statistic .con {
        justify-content: flex-start;
        .number {
          font-size: 28px !important;
        }
      }
    }
  }
}
</style>
